<template>
	<view class="container">
		<m-tabbar native>
		    <template v-slot:tabbar_index_1> 
		        <view class="custom_style">
		            <view class="custom_style_icon">+</view>
		        </view>
		    </template>
		</m-tabbar>
		<view class="search">
			<view class="icon-input">
				<uni-icons class="icon" color="#a1a0a0" type="search" size="20"></uni-icons>
				<input placeholder="搜索聊天记录/联系人" placeholder-class="input" v-model="messageKey"/>
			</view>
		</view>
		<scroll-view scroll-y class="scroll-view">
			 <view class="data">
				  <view class="item" v-for="item in personList" :key="item.id" @click.stop="toDetail(item)">
					  <view class="user">
						  <image class="avatrar" v-if="item.fromUserId == 0 || item.fromUserId == -1|| item.fromUserId == -2|| item.fromUserId == -3"
                     src="https://m.nocexpo.com/statics/js/modules/h5/img/icon33.png" />
						  <image class="avatrar" v-else :src="item.avatarUrl?item.avatarUrl:'/static/image/wutouxiang.png'" />
						  <view class="info">

                <!--系统消息-->
                <block v-if="item.fromUserId == 0">
                  <view class="name" >
                    通知
                    <view class="type">
                      系统消息
                    </view>
                  </view>
                  <view class="text">
                    点击查看详情
                  </view>
                </block>

                <!--平台收益-->
                <block v-else-if="item.fromUserId == -1">
                  <view class="name" >
                    平台收益通知
                    <view class="type">
                      系统消息
                    </view>
                  </view>
                  <view class="text">
                    {{item.lastInfo}}
                  </view>
                </block>

                <!--视频评论通知-->
                <block v-else-if="item.fromUserId == -2">
                  <view class="name" >
                    视频评论通知
                    <view class="type">
                      系统消息
                    </view>
                  </view>
                  <view class="text">
                    您发布的小视频被评论了，点击查看
                  </view>
                </block>

                <!--动态评论-->
                <block v-else-if="item.fromUserId == -3">
                  <view class="name" >
                    动态评论通知
                    <view class="type">
                      系统消息
                    </view>
                  </view>
                  <view class="text">
                    您发布的动态被评论了，点击查看
                  </view>
                </block>

                <!--文本消息-->
                <block v-else>
                  <view class="name" >
                    {{item.fromUserName && item.fromUserName.indexOf('游客')>=0 ? '游客' : item.fromUserName }}
                    <view class="type">
                      {{item.company}}
                      <image class="img" v-if="item.userType == 1 && item.userState ==1" src="https://m.nocexpo.com/statics/js/modules/h5/img/icon_gong.png" mode="widthFix" />
                    </view>
                  </view>
                  <view class="text">
                    <label v-show="item.status=='0'" style="color: #8f9aa8; font-size: 28rpx;">[新招呼]</label>
                    {{item.lastInfo}}
                  </view>
                </block>

						  </view>
					  </view>
					  <view class="date">{{item.time}}</view>
				  </view>
			 </view>
			<hint ref="hint"></hint>
		</scroll-view>
	</view>
</template>

<script>
  import chatApi from '@/api/chat.js';
  import commonMethod from '@/utils/commonMethod.js';
	export default {
		data() {
			return {
				register: false,//登录
				noData:false,
				personList: [],
				noticeList: [],
				sysNotice:false,
				messageKey:'',
				loadState: 'init',
				currentUser:{},
				
				startTime:'', //进入页面时间
				endTime:'',//离开页面时间
				currentUrl:'',//当前页面全路径
			}
		},

		async created() {
			//判断是否登录
			this.register = await commonMethod.getUserLoginFlag();
			if (this.register) {
				uni.redirectTo({
					url: '/pages/account/login/login'
				})
			}else{
				this.query();
				
			}
			const currentPromise = await commonMethod.currentUserAxios()
			this.currentUser = currentPromise.data.session_user_h5
		},
		onShow(){
			setTimeout(()=> {
				if (getApp().globalData.onShow) {
					getApp().globalData.onShow = 0;
					console.log("demo前后台切换之切到前台")
				}
				else {
					console.log("demo页面被切换显示")
					this.startTime = +new Date();
				}
			}, 100);
		},
		onHide(){
			setTimeout(() => {
				var that = this
				if (getApp().globalData.onHide) {
					getApp().globalData.onHide = 0;
					console.log("还在当前页面活动")
				}
				else {
					that.endTime = +new Date();
					console.log("demo页面停留时间：" + (that.endTime - that.startTime))
					var stayTime = Math.round((that.endTime - that.startTime)/1000);
				   //这里获取到页面停留时间stayTime，然后了可以上报了
				   this.saveFootPrint(stayTime);
				}
			}, 100)
		},

		async mounted(){
			const pages = getCurrentPages()
			const currentPage =pages[pages.length - 1]
			this.currentUrl = currentPage.$page.fullPath
			//判断是否登录
			// this.register = await commonMethod.getUserLoginFlag();
			// if (this.register) {
			//   // 跳转登录
			//   uni.navigateTo({
			//     url: '/pages/account/login/login'
			//   })
			//   return;
			// }
			// 加载中
			this.$refs.hint.setStatus("loading");
      //setInterval(this.query, 5000);
		},

		methods: {
			saveFootPrint(stayTime){
				commonMethod.saveFootPrint(this.currentUser.id,this.startTime,stayTime,this.currentUrl,"聊天")
				
			},
			/**
			* 判断通知是否有内容，没有内容不显示通知栏
			*/
			async query() {
				chatApi.getNoticeList().then(res => {
					if(res.data.noticeMsgList.length > 0){
						this.sysNotice = true;
					}else{
						this.sysNotice = false;
					}
				});
	
				//获取消息列表
				chatApi.getMessageList({messageKey: this.messageKey,}).then(res => {
					this.personList = res.data.list;
					if(this.personList.length<1){
						this.noData =true
					}else{
						this.noData =false
					}
					this.personList.forEach((value,index,array)=>{
						let nameStart = value.lastInfo.indexOf('*[*')
						let nameEnd = value.lastInfo.indexOf('*]*')
						if(nameStart != -1){
							array[index].lastInfo = '【'+ value.lastInfo.slice(nameStart+3, nameEnd) + '】'
						}
					})
					// 加载完成
					this.$refs.hint.setStatus("loadingComplete");
				});
			},

			/**
			* 跳转到消息详情
			* @param item
			*/
			toDetail(item) {
				//0:系统消息 -1平台收益通知 -2视频评论通知 -3资讯评论通知
				if (item.fromUserId == 0) {
					window.location.href = "/h5/noticeMessage.html";
				} else if (item.fromUserId == -1) {
					//消息更新为已读
					chatApi.updateMessageRead({groupId: item.id,});
					window.location.href = "/h5/incomeMessage.html";
				} else if (item.fromUserId == -2) {
					window.location.href = "/h5/videoMessage.html";
				} else if (item.fromUserId == -3) {
					window.location.href = "/h5/newsMessage.html";
				} else {
					//window.location.href = "/h5/msgchat.html?id=" + item.id;
					//跳转到消息详情
					uni.navigateTo({
						url: '/pages/news/chatDetail/chatDetail?id=' + item.id
					})
				}
			},

		}
	}
</script>

<style lang="scss">
	.search {

		background: #fff;
		padding:$interval-min $interval;
		.icon-input {
			flex: 1;
			display: flex;
			align-items: center;
			height: 68rpx;
			background: #f7f7f7;
			border-radius: 35rpx;
			.icon {
				margin-left: 25rpx;
				margin-right: 18rpx;
			}
			input {
				flex: 1;
				color: $text-color;
			}
			.input {
				color: #a1a0a0;
			}
		}
		
	}
	.scroll-view{
		height: calc(100% - 108rpx);
		.data{
			.item{
				padding: $interval;
				display: flex;
				justify-content: space-between;
				.user{
					display: flex;
					
						.avatrar{
							width: 92rpx;
							height: 92rpx;
							border-radius: 50%;
							margin-right: $interval-min;
						}
						.info{
							.name{
								display: flex;
								align-items: center;
								font-weight: 600;
								font-size: $font-size-max;
								.type{
									font-weight: normal;
									display: flex;
									align-items: center;
									font-size: $font-size-min;
									color:$text-color-grey;
									margin-left: 16rpx;
									.img{
										margin-left: 16rpx;
										width: 40rpx;
										height: 40rpx;
									}
								}
							
							}
							.text{
								margin-top:10rpx;
							}
						}
				}
				.date{
					margin-top: 5rpx;
					font-size: $font-size-min;
					color:$text-color-grey;
				}
			}
		}
	}

</style>
